<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>小智1.0</title>
    <!-- 设计稿iPhone XR 414 html基础font-size=41.1px -->
    <!-- 该页面跳转缓慢，取消base64图片素材方法，采用webp图片素材格式 -->
    <link rel="stylesheet" href="./css/section.css">
    <script src="../../lib/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        
        html, body{
            height: 100%;
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
            
        }
        a:link{
            color: #404040;
        }
        a:visited{
            color: #404040;
        }
        a:hover{
            color: #404040;
        }
        a:active{
            color: #404040;
        }
        ::-webkit-scrollbar{
            /* width: 0; 移动端取消滚动条无效*/
            display: none;
        }
        body{
            background: #fff;/*#2493f1*/
            display: flex;
            flex-direction: column;
            font-family: 微软雅黑;
            font-size: .3865rem;
            letter-spacing: .0169rem;/*
            position: relative;*/
            overflow: hidden;/*禁止上下滑动*/
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        header{
            background-color: #fff !important;
            box-shadow: .1208rem .1208rem .2415rem #5b5b5b29;

        }
        
        section{/*
            border: 1px solid red;*/
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            align-items: center;/*

            position: relative;*/
        }
        
        
        





        /*弹窗样式*/
        #alert {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #00000047;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }

        .window {
            border-radius: .2415rem;
            font-size: .4348rem;
            color: #2c2c2c;
            width: 70%;
            display: flex;
            flex-direction: column;
            align-items: center;
            /*
            box-sizing: border-box;
            padding: .4831rem .9662rem;*/
            background-color: #ffffff;
            overflow: hidden;
        }

        .window .alt_title {
            /*
            border: 1px solid red;*/
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            height: 1.087rem;
            font-weight: 600;

        }

        .window .alt_body {
            /*
            border: 1px solid red;*/
            width: 100%;
            /**/
            min-height: 1.9324rem;
            box-sizing: border-box;
            padding: .3623rem .4831rem .4831rem .4831rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: .4106rem;
        }

        .window .action1 {
            /**/
            border-top: .0242rem solid rgb(207, 207, 207);
            width: 100%;
            display: flex;
            flex-direction: row;

        }

        .window .action1 div {
            width: 50%;
            height: 1.2077rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fb4c4c;
        }

        .window .action2 {
            border-top: .0242rem solid rgb(207, 207, 207);
            width: 100%;
        }

        .window .action2 div {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 1.2077rem;
            color: #4c97fb;
        }

        .window .action1 div:nth-child(1) {
            border-right: .0121rem solid rgb(207, 207, 207);
        }

        .window .action1 div:nth-child(2) {
            color: #4c97fb;
            border-left: .0121rem solid rgb(207, 207, 207);
        }

        









        


        
    </style>
    <link rel="stylesheet" href="../../css/header.css">
    <script src="../../lib/vue.js"></script>
    
</head>
<body>
    <header>
        <div class="backBtn"></div>
        <div class="left"></div>
        <span class="title">小智</span>
    </header>
    <script>
        document.querySelector(".backBtn").onclick=function(){
            window.history.go(-1)
        }
    </script>
    <section>
         <div class="box">
            <ul class="chatUl">
                <li v-for="item of contentList" :class="(item.role == 'assistant') ? 'left' : 'right'">
                    <div v-show="item.role == 'assistant' ? true : false" class="ai"></div>
                    <div>{{item.content}}</div>
                    <div v-show="item.role == 'assistant'?false:true" class="read">已送达</div>
                </li>
                
            </ul>
         </div>  
         
        

        <div class="nav">
            <input type="text" @input="checkInput()" v-model="userMsg" name="" id="" placeholder="请输入你的问题...">
            <button @click="send()" :disabled="dis" :style="(dis===true) ? {opacity:'0.5'}:{opacity:'1'}"></button>
        </div>




            






            <!-- 弹窗 -->
        <div id="alert" v-show="alertShow">
            <div class="window">
                <div class="alt_title">{{alt_title}}</div>
                <div class="alt_body">{{alt_body}}</div>
                <div class="action action1" v-show="action1Show">
                    <div class="cancel" @click="cancel()">取消</div>
                    <div class="do" @click="yes()">确定</div>
                </div>
                <div class="action action2" v-show="!action1Show">
                    <div class="cancel" @click="cancel()">确定</div>
                </div>
            </div>
        </div>

        
    </section>


    

    
    
    

    <script>
        new Vue({
            el: "section",
            data: {
                contentList: [
                {
                    role: "assistant",
                    content: "你好呀！我是小智 (V1.0)，很高兴您的到来。"
                }
                ],
                userMsg: "",
                dis: false,
                alertShow: false,
                action1Show: false,
                alt_title: "提示",
                alt_body: ""
                
            },
            computed: {
                myStringByteCount: function() {  
                    return this.getByteCount1(this.myString);  
                } 
            },
            methods: {
                getByteCount1: function(str) {  
                    let count = 0;  
                    for (let i = 0; i < str.length; i++) {  
                        count += str.charCodeAt(i) > 127 ? 2 : 1;  
                    }  
                    return count;  
                },
                getByteCount(str) {  
                    let count = 0;  
                    for (let i = 0; i < str.length; i++) {  
                        count += str.charCodeAt(i) > 127 ? 2 : 1;  
                    }  
                    return count;  
                },
                checkInput(){

                },
                send(){
                    if(/^\s*$/.test(this.userMsg)){
                        this.alertShow = true
                        this.alt_body = "请输入问题！"
                        this.userMsg = ""
                    }else{
                        this.dis = true
                        this.contentList.push({
                            "role": "user",
                            "content": this.userMsg
                        })
                        //发送请求

                        let userInfo = localStorage.getItem('XGB-user')
                        let userid = encodeURIComponent(JSON.parse(userInfo).id) 
                        let userMsg = encodeURIComponent(this.userMsg)
                        axios.get(`https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/chat1/HLGkgbhlGBHKJlksjvlkahjgkLJHljh45635fv564d65G4F?userid=${userid}&msg=${userMsg}`)
                        .then(res=>{
                            if(res.data.state.code !== 0){
                                this.alertShow = true
                                this.alt_body = res.data.state.msg+" ["+res.data.state.code+"]"
                            }else{
                                var result = res.data.msg.replaceAll('\n\n', '<br>')
                                result = result.replaceAll('```', '<br>')
                                result = result.replaceAll('\n', ' ')
                                this.contentList.push(
                                    {
                                        role: "assistant",
                                        content: ""
                                    }
                                )
                                let time0 = setTimeout(()=>{
                                    document.querySelector('.chatUl li:last-child').scrollIntoView({
                                            behavior: 'smooth'
                                        })
                                    clearTimeout(time0)
                                    }, 1)
                                
                                var i = 1;
                                let _this = this
                                function f1(){
                                    if(i<=result.length){
                                        document.querySelector(".chatUl li.left:last-child div:nth-child(2)").innerHTML=result.slice(0,i)+"|"
                                        i++
                                    }else{
                                        document.querySelector(".chatUl li.left:last-child div:nth-child(2)").innerHTML=result.slice(0,i)
                                        
                                        _this.dis = false
                                        clearInterval(interval1)
                                    }
                                }
                                var interval1 = setInterval(f1,70)
                            }
                            



                        })


                        //处理完毕

                        let time1 = setTimeout(()=>{
                        document.querySelector('.chatUl li:last-child').scrollIntoView({
                                behavior: 'smooth'
                            })
                            this.userMsg = ""
                            changeSta()
                            clearTimeout(time1)

                        }, 10)
                        function changeSta(){
                            //1~3
                            let r = Math.floor(Math.random() * (4 - 1) + 1)*1200
                            let a = Math.random()
                            let time2 = setTimeout(()=>{
                                document.querySelector('.chatUl li:last-child .read').innerText='已读'
                                clearTimeout(time2)
                            }, r*a)
                        }
                        
                    }
                    
                    
                },
                
                cancel() {
                    if(this.code !== 0){
                        this.alertShow = false
                    }else{
                        this.alertShow = false
                        window.location.replace('../../login/login.html')
                    }
                    
                },
                yes() {
                    console.log("用户点击 “确定”")
                }
            },
            mounted() {
            }
        })


        
        



    </script>
    
    <script>
        //根据设备宽度计算html的font-size
        function resetHtmlFont(){
            //获取html对象并动态设置font-size = 设备宽度的1/10
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        //执行一下
        resetHtmlFont();
        //如果窗口大小改变了，则重新计算基础font-size
        window.onresize = resetHtmlFont;
    </script>
</body>
</html>